<template>
  <div class="nav-rights">
    <div class="nav-right">
      <div class="bill_flow_box">
        <div class="rightarea-con">
          <div class="form-group">
            <span>
              {{$t('uc.finance.record.start_end')}} ：
            </span>
            <DatePicker v-model="rangeDate" @on-change="changedate" type="daterange" style="width: 200px;margin-right:30px;" @on-clear="clear"></DatePicker>
            <!--<DatePicker v-model="startDate" type="date"></DatePicker>-->
            <!--<span>-->
            <!--{{$t('uc.finance.record.to')}}-->
            <!--</span>-->
            <!--<DatePicker v-model="endDate" type="date"></DatePicker>-->
            <span>{{$t('uc.finance.record.symbol')}} ：</span>
            <Input style="width: 200px;margin-right:30px;" class="search" search :placeholder="$t('common.searchplaceholder')" v-model="filterSearch.symbol"/>
            <span>
              {{$t('uc.finance.record.operatetype')}} ：
            </span>
            <Select v-model="filterSearch.type" @on-change="changeType" style="width:200px" :placeholder="$t('common.pleaseselect')">
              <Option v-for="item in recordType" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <Button type="warning" @click="queryOrder" style="padding: 6px 30px;margin-left:10px;background-color:#f0a70a;border-color:#f0a70a">{{$t('uc.finance.record.search')}}</Button>
          </div>
          <div class="order-table">
            <Table :no-data-text="$t('common.nodata')" :columns="tableColumnsRecord" :data="tableRecordShow" :disabled-hover="true" :loading="loading"></Table>
            <div style="margin: 10px;overflow: hidden">
              <div style="float: right;">
                <Page :total="total" :pageSize="this.filterSearch.pageSize" show-total :current="this.filterSearch.pageNo" @on-change="changePage" id="record_pages"></Page>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      filterSearch: {
        pageNo: 1,
			  pageSize: 10,
        account: '',
        symbol: '',
        type: '',
        startTime: '',
        endTime: ''
      },
      loading: false,
      rangeDate: "",
      recordType: [
        {
          value: 0,
          label: this.$t("uc.finance.record.recharge")
        },
        {
          value: 1,
          label: this.$t("uc.finance.record.withdraw")
        },
        {
          value: 2,
          label: this.$t("uc.finance.record.deposit")
        },
        {
          value: 3,
          label: this.$t("uc.finance.record.extract")
        },
        {
          value: 4,
          label: this.$t("uc.finance.record.exchange")
        },
        {
          value: 5,
          label: this.$t("uc.finance.record.exchangefee")
        },
        {
          value: 6,
          label: this.$t("uc.finance.record.storagefee")
        },
        {
          value: "",
          label: this.$t("uc.finance.record.all")
        }
      ],
      total: 0,
      currentPageIdx: 1,
      tableRecord: [],
      tableRecordShow: [],
      searchKey: ""
    };
  },
  created: function() {
    this.getList(this.filterSearch);
  },
  methods: {
    changedate(val) {
      this.filterSearch.startTime = val[0] + " 00:00:00";
			this.filterSearch.endTime = val[1] + " 00:00:00";
    },
    changePage(pageindex) {
      this.filterSearch.pageNo=pageindex;
      this.getList(this.filterSearch);
    },
    queryOrder() {
      this.currentPageIdx = 1;
      this.filterSearch.pageNo = 1;
      this.getList(this.filterSearch);
    },
    changeType() {
      if(!this.filterSearch.type && this.filterSearch.type !== 0) {
        this.filterSearch.type = '';
      }
    },
    getList(obj) {
      //获取tableWithdraw
      let memberId = 0;
      !this.$store.getters.isLogin && this.$router.push("/login");
      this.$store.getters.isLogin && (memberId = this.$store.getters.member.id);
      this.loading = true;
      this.$http.post(this.host + "/api/uc/asset/transaction/all", obj).then(response => {
          var resp = response.body;
          if (resp.code == 0) {
            this.loading = false;
            if (resp.data) {
              let trueData = resp.data;
              this.total = trueData.totalElements;
              this.tableRecord = trueData.content;
              for (let i = 0; i < this.tableRecord.length; i++) {
                if(this.tableRecord[i].symbol) {
                  this.tableRecord[i]["symbol"] = this.tableRecord[i].symbol;
                }
              }
              this.tableRecordShow = this.tableRecord;
            }
          } else {
            this.$Message.error(resp.message);
          }
          this.loading = false;
        });
    },
    clear() {
      this.filterSearch.startTime = "";
      this.filterSearch.endTime = "";
    }
  },
  computed: {
    tableColumnsRecord() {
      let columns = [];
      var that = this;
      columns.push({
        title: this.$t("uc.finance.record.transactionno"),
        align: "center",
        width: 160,
        key:"transactionNumber"
      });
      columns.push({
        title: this.$t("uc.finance.record.chargetime"),
        align: "center",
        width: 160,
        key:"createTime"
      });
      columns.push({
        title: this.$t("uc.finance.record.type"),
        render: function(h, params) {
          let str = "";
          let type = params.row.type;
          if (type == 0) {
            str = that.$t("uc.finance.record.recharge");
          } else if (type == 1) {
            str = that.$t("uc.finance.record.withdraw");
          } else if (type == 2) {
            str = that.$t("uc.finance.record.deposit");
          } else if (type == 3) {
            str = that.$t("uc.finance.record.extract");
          } else if (type == 4) {
            str = that.$t("uc.finance.record.exchange");
          } else if (type == 5) {
            str = that.$t("uc.finance.record.exchangefee");
          } else {
            str = "存储费";
          }
          return h("div", str, "");
        }
      });
      columns.push({
        title: this.$t("uc.finance.record.direction"),
        align: "center",
        render: (h, param) => {
          return h("div", {}, param.row.direction == "BUY" ? "买入" : param.row.direction == "SELL" ? "卖出" : "");
        }
      });
      columns.push({
        title: this.$t("uc.finance.record.symbol"),
        align: "center",
        key:"symbol",
        width: 180
        // render: (h, param) => {
        //   return h("div", {}, param.row._source.symbol);
        // }
      });
      columns.push({
        // title: this.$t("uc.finance.record.num"),
        title: this.$t("uc.finance.record.num"), //到账数量
        align: "center",
        render(h, params) {
          return h(
            "span",
            {
              attrs: {
                title: params.row.amount
              }
            },
            that.toFloor(params.row.amount || "0")
          );
        }
      });
      columns.push({
        title: this.$t("uc.finance.record.balance"),
        align: "center",
        render(h, params) {
          return h(
            "span",
            {
              attrs: {
                title: params.row.balance
              }
            },
            that.toFloor(params.row.balance || "0")
          );
        }
      });
      columns.push({
        title: this.$t("uc.finance.record.status"),
        key: "state",
        align: "center",
        render: (h, obj) => {
          let type = obj.row.type;
          let stateTxt = null;
          if(type <= 3) {
            let userState = obj.row.state;
            if(userState === "APPLYING") {
              stateTxt = '未审核';
            } else if (userState === "COMPLETE") {
              stateTxt = '已完成';
            } else {
              stateTxt = '驳回';
            }
            return h('span', {
            },stateTxt);
          } else {
            stateTxt = "完成";
            return h('span', {
            },stateTxt);
          }
        }
      });
      columns.push({
        title: this.$t("uc.finance.record.transactionmember"),
        align: "center",
        width: 240,
        key:"transactionMember"
        // render: (h, param) => {
        //   return h("div", {}, param.row._source.symbol);
        // }
      });
      return columns;
    }
  }
};
</script>
<style scoped lang="scss">
.nav-rights {
  .nav-right {
    height: auto;
    overflow: hidden;
    padding: 0 15px;
    .bill_flow_box .rightarea-con {
      .form-group {
        margin-bottom: 20px;
        text-align: left;
      }
    }
  }
}
</style>
